<template>
    <div class="el-header">
        <span class="el-header-title">学生就业后台管理系统</span>
        <div class="el-user-info">
            <el-dropdown class="el-dropdown-link">
                <el-icon>
                    <setting />
                </el-icon>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>
                            <span @click="$router.push('/managerInfo')">个人中心</span>
                        </el-dropdown-item>
                        <el-dropdown-item>
                            <span @click="logout">退出登录</span>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <span class="el-header-username">{{ name }}</span>
        </div>

    </div>
</template>
  
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { Setting } from '@element-plus/icons-vue'
import { ElMessage,ElMessageBox } from 'element-plus';
import router from '@/router';

const name = ref()

function logout() {
    ElMessageBox.confirm(
        '是否确认退出登录?',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        //确定
        .then(() => {
            ElMessage.success('退出登录成功')
            //清除localStorage(本地缓存)
            localStorage.clear()
            //跳转到登录页面
            router.push('/')
        })
        //取消
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消成功',
            })
        })
}
onMounted(() => {
    name.value = localStorage.getItem('name')
})
</script>
  
<style scoped>
.el-header {
    align-items: center;
    height: 60px;
    line-height: 60px;
    padding: 0 24px;
    background-color: #ffffff;
    border-bottom: 1px solid #dcdfe6;
    position: relative;
}

.el-header-title {
    cursor: default;
    font-size: 30px;
    font-weight: bold;
    color: #303133;
    margin-right: 20px;
    margin-left: 35%;
}

.el-user-info {
    display: inline-block;
    position: absolute;
    right: 1%;
}

.el-dropdown-link {
    margin-top: 30%;
}

.el-header-username {
    cursor: default;
    margin-left: 5px;
    font-size: 18px;
    color: #606266;
}
</style>
  